<!--通话评分弹窗-->
<template>
  <!--<div>-->
  <div class="call-grade" :class="callDialogShow ? 'layout-qua' : 'layin-qua'">
    <div v-if="!loading">
      <div class="call-grade-left">
        <h2>{{$t('intelligentQualityCheck.intelCallDetail')}}</h2>
        <div class="call-grade-left-con">
          <affix :label="$t('webchat.basicInfo')" class="call-detail">
            <detail-table :callData="currentItemCall" :audioId="flagId" :isCallGrade="true" :intelQulityCheck="true" :scoreStatus="isHandStatus" :resultGrade="resultGrade" :inputFlag="inputFlag" :isFirstEnter="isFirstEnter" :pauseAudio="pauseAudio"></detail-table>
          </affix>
          <affix :label="$t('business.businessInfo')">
            <div  class="business">
              <div v-if="businessShow.length ===0" >{{$t('qualityCheck.noBusinessInfo')}}</div>
              <div class="history-content" v-for="(item, index) in businessShow" :key="index">
                <div class="data">
                  <div style="float: left;">{{item.createUser}}<span class="pad-left">{{$t('business.createBusiness')}}</span></div>
                  <div style="float: right;"><span class="pad-right">{{$t('public.callStatus')}}</span>{{item.step}}</div>
                </div>
                <div class="clear"></div>
                <div v-for="(one, index) in item.data" :key="index" class="bus-info div-color">
                  <div v-if="one.name === $t('business.businessNumber')">
                    <span>{{one.name + $t('public.colon')}}</span><span>{{one.value}}</span>
                    <span @click="busShowDetail(item._id)" style="float: right;" class="span-color"><i class="icon iconfont font12 pad-right" :class="busDetailShow? 'icon-shouqi':'icon-zhankai1'"></i>{{busDetailShow?$t('qualityCheck.businessUp'):$t('qualityCheck.businessDown')}}</span>
                  </div>
                  <div v-else>
                    <span>{{one.name + $t('public.colon')}}</span>
                    <span class="break-all" v-if="typeof one.value === 'object'">
              <div v-for="(item1, index) in one.value" :key="index">
                <globalPopup :url="item1.url" :key="item1.url2"
                             @showBigImage="showBigImage"
                             :name="item1.name" :currObj="item1" :srcUrl="item1.url2" :imgObj="item.data"></globalPopup>
              </div>
        </span>
                    <span class="break-all" v-else v-html="one.value"></span>
                  </div>
                </div>
                <business class="business-dialog bus-info" :busId="busId" :showHistory="true" v-if="busDetailShow"  @event="businessEvent"></business>
              </div>
            </div>
          </affix>
          <div v-if="currentItemCall.type === 'auto'">
            <affix :label="$t('intelligentQualityCheck.intelDetail')" class="call-detail"></affix>
            <div class="rules-wrap">
              <span :class="{'active' : index === rulesIndex}" v-for="(item,index) in redRuleResults"  @click="markRed(item.ruleId, index)">{{item.name}}</span>
            </div>
            <webChatView ref="callChatView" :firstRuleId="redRuleResults.length > 0 ? redRuleResults[0].ruleId : '000'" :chatInformationId ="this.currentItemCall._id" :qualityCheck="true" :historyList="currentItemCall.dialogues" v-show="currentItemCall.type === 'auto'" :flag="callFlag" :ruleResults='currentItemCall.ruleResults'></webChatView>
            <div class="channelHit">
              <!--<p style="color:#878787;padding: 10px 0px">{{$t('intelligentQualityCheck.intelDetailRule')}}</p>-->
              <!--@selection-change="handleSelectionChange"-->
              <el-table :data="currentItemCall.ruleResults" ref="callRuleTable" 
                  :row-class-name="getRowClass" @expand-change='expandChange' id="textColor">
                <!--<el-table-column-->
                  <!--type="selection"-->
                  <!--width="55">-->
                <!--</el-table-column>-->
                <el-table-column
                  :show-overflow-tooltip="true"
                  v-for="(item, index) in options"
                  :key="index"
                  :prop="item.name"
                  :label="item.displayname">
                   <template slot-scope="scope" >
                     <div v-if="item.name=='webChatRuleDetail'&&scope.row.webChatRuleDetail&&scope.row.webChatRuleDetail.length>0">
                        <p v-html="scope.row.webChatRuleDetail[0].type+'-'+scope.row.webChatRuleDetail[0].text"></p>
                     </div>
                     <div v-else-if="item.name=='webChatRuleDetail'&&(scope.row.webChatRuleDetail&&scope.row.webChatRuleDetail.length==0)">
                        <p>{{$t('public.none')}}</p>
                     </div>
                     <div v-else>
                        <span>{{scope.row[item.name]}}</span>
                     </div>
                  </template>
                </el-table-column>
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <div v-if="props.row.webChatRuleDetail&&props.row.webChatRuleDetail.length>0" id="redFont">
                      <p v-for="(i,idx) of props.row.webChatRuleDetail" :key="idx" v-html="i.type+'-'+i.text"></p>
                    </div>
                  </template>
              </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div class="call-grade-right">
        <h2>{{$t('qualityCheck.grade2')}}
          <div v-show="callDialogShow" class="close" @click="closeWindow"><i class="el-icon-close"></i></div>
        </h2>
        <div class="call-grade-right-con">
          <div v-show="currentItemCall.type === 'auto'">
            <div class="supplemental">
              <h3>{{$t('intelligentQualityCheck.intelSupplemental')}}</h3>
              <el-input v-model="supplementalInputValue" :disabled="checkBoxIsTrue" @change="inputChangeFun" class="right-input" style="margin: 10px 5px 5px 0PX"></el-input><span>{{$t('public.minutes')}}</span>
              <p class="right-content">{{$t('intelligentQualityCheck.intelSuppelMentalExplain')}}</p>
              <h3 style="margin-top: 10px">{{$t('qualityCheck.commentCont')}}</h3>
              <textarea :placeholder="currentItemCall.comment" class="right-text" v-model="comment"></textarea>
            </div>
            <!--<div class="hand">-->
              <!--<h3>{{$t('intelligentQualityCheck.intelHandScore')}}</h3>-->
              <!--<el-checkbox v-model="checkBoxIsTrue" @change="checkBoxFun" class="checkBox">{{$t('intelligentQualityCheck.intelIsAccuracy')}}</el-checkbox>-->
              <!--<div v-show="checkBoxIsTrue" style="margin: 5px 5px 5px 0px;">-->
                <!--<el-input v-model="handInputValue" @change="handiInputChangeFun" class="right-input"></el-input><span>{{$t('public.minutes')}}</span>-->
              <!--</div>-->
              <!--<p class="right-content">{{$t('intelligentQualityCheck.intelHandScoreAfter')}}</p>-->
            <!--</div>-->
          </div>
          <div v-show="currentItemCall.type === 'manual'">
            <div class="wrap_grade">
              <el-popover
                ref="popover4"
                placement="top"
                width="400"
                trigger="hover">
                <quality-assist :ruleRender="ruleRender"></quality-assist>
              </el-popover>
              <span v-popover:popover4 class="assist">{{$t('intelligentQualityCheck.intelQualiAssist')}}</span>
            </div>
            <el-row :gutter="10">
              <el-col :span="6" class="grade_ipt">
                <span class="qc_score">{{$t('intelligentQualityCheck.intelGradeNum')}}:</span>
              </el-col>
              <el-col :span="18">
                <el-input v-model.trim="handInputValue"  @change="handiInputChangeFun"></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="6" class="grade_are">
                <span>{{$t('intelligentQualityCheck.intelGradeDetail')}}:</span>
              </el-col>
              <el-col :span="18">
                <textarea v-model="comment" :placeholder="currentItemCall.comment" class="right-text" style="width: 256px"></textarea>
              </el-col>
            </el-row>
          </div>
          <div style="margin-top: 10px">
            <single-label class="single-label-grade" v-if="labelType === 'single' && isCallLabel" :callLabel="getCallLabel" :disabled="disabled" :checkLabels="currentItemCall.LABELS || []" :callSheetId="currentItemCall.CALL_SHEET_ID" :flag="flagQC" :refreshCallLabel="refreshCallGrade"></single-label>
            <multi-label v-if="labelType === 'multi' && isCallLabel" :callLabel="getCallLabel" :disabled="disabled" :checkLabels="currentItemCall.LABELS || []" :callSheetId="currentItemCall.CALL_SHEET_ID" :flag="flagQC" :refreshCallLabel="refreshCallGrade" :showAdd="true"></multi-label>
          </div>
          <div style="text-align: right;margin-top: 50px">
            <el-button size="mini" @click="rejectFun" v-if="appealFlag">{{$t('intelligentQualityCheck.intelReject')}}</el-button>
            <el-button size="mini" @click="giveUpResult" v-else>{{$t('intelligentQualityCheck.intelGiveUpResult')}}</el-button>
            <el-button size="mini" @click="channelFun">{{$t('public.cancel')}}</el-button>
            <el-button size="mini" type="primary" @click="checkResultFun" v-if="appealFlag">{{$t('intelligentQualityCheck.intelRegrade')}}</el-button>
            <el-button size="mini" type="primary" @click="checkResultFun" v-else>{{$t('public.confirm')}}</el-button>
          </div>
        </div>
      </div>
    </div>
    <div v-show="callDialogShow" class="mask-qua"></div>
  </div>
  <!--</div>-->
</template>
<script>
  import globalPopup from '@/components/ui-modules/affix/globalPopup.vue'
  import qualityAssist from '../qualityCheck/qualityAssist.vue'
  import {commitImg} from '@/utils/publicMethod.js'
  import {checkform} from '@/utils/validate.js'
  import {deepClone, getCache, getAllUseSingleCallLabel, getAllUseMultiCallLabel} from '@/utils/m7Utils.js'
  import {getBusinessHistoryDataNew, showCountDown} from '@/utils/workflowUtils.js'
  import business from '@/components/public-modules/cust-tab-content/business/index'
  import gradeTemp from '../../qualityCheck/base/gradeTemp'
  import passTemp from '../../qualityCheck/base/passTemp'
  import affix from '../../../ui-modules/affix/Affix.vue'
  import singleLabel from '@/components/business-modules/call/SingleLabel.vue'
  import MultiLabel from '@/components/business-modules/call/MultiLabel.vue'
  import AudioCommon from '@/components/public-modules/audio'
  import webChatView from './qualityCheckWebChatView'
  import bus from '@/store/eventBus'
  import DetailTable from '@/components/public-modules/cust-tab-content/call-detail/DetailTable.vue'
  export default {
    name: 'qualityCheckResultCallDetails',
    data () {
      return {
        pauseAudio: 'open',
        busId: '',
        loading: true,
        busDetailShow: false,
        gradeObj: {
          grade: 0,
          COMMENT: '',
          obj: {},
          type: ''
        },
        GRADE_AMOUNT: {
          amount: '',
          COMMENT: ''
        },
        options: [
          {displayname: this.$t('intelligentQualityCheck.intelMatchRule'), name: 'name'},
          {displayname: this.$t('intelligentQualityCheck.intelCorrelation'), name: 'scoreItem'},
          {displayname: this.$t('intelligentQualityCheck.intelHitDetails'), name: 'hitCount'},
          {displayname: this.$t('intelligentQualityCheck.intelHitMsg'), name: 'webChatRuleDetail'},
        ],
        COMMENT: '',
        configList: [],
        configListForm: {},
        simpleForm: {},
        flagQC: 'QC',
        isCallLabel: true,
        SQ_LABEL: '',
        monitorType: '',
        callFlag: true,
        multipleSelection: [],
        isHandStatus: false,
        isAddPerformanceChecked: true,   //    是否 算入绩效考核  座席提交时 加的
        refreshAudio: 0,
        dataType: ['pdf', 'PDF', 'txt', 'TXT'],
        changeMonitorType: 'enable',
        supplementalInputValue: '', // 补充得分值
        handInputValue: '', // 手动评分值
        comment: '', // 备注
        resultGrade: 0,
        inputFlag: false,
        chooseArray: [],
        ruleResultArray: [],
        isFirstEnter: false,
        // intelQulityCheck: true
        checkBoxIsTrue: false, // 是否手动评分
        rulesIndex: 0 // 被点中规则index
      }
    },
    components: {
      globalPopup,
      business,
      gradeTemp,
      passTemp,
      singleLabel,
      MultiLabel,
      affix,
      AudioCommon,
      DetailTable,
      qualityAssist,
      webChatView
    },
    computed: {
      saveBtnDescribe () {
        return this.reGrade ? this.$t('public.save') : this.$t('qualityCheck.saveAndNext')
      },
      passBtn () {
        return !this.reGrade
      },
      getSQLabel () {
        let sqLabels = this.$getCache('sqLabels')
        return sqLabels || []
      },
      businessShow () {
        let data = this.currentItemCall.busHistory || []
        let arr = []
        for (let i = 0; i < data.length; i++) {
          let busObj = {_id: data[i]._id}
          let item = data[i]
          busObj.lastUpdateUser = getCache('agents', item.lastUpdateUser).displayName
          busObj.createUser = getCache('agents', item.createUser).displayName
          busObj.step = getCache('businessFlowStep', item.step).name
          busObj.flow = getCache('businessFlow', item.flow).name
          busObj.data = getBusinessHistoryDataNew({excuteData: item.historyData, action: 'create'}, item)
          arr.push(busObj)
        }
        return arr
      },
      getCallLabel () {
        this.$nextTick(() => { // 第一次进来加载不到录音的dom
          this.refreshAudio = Math.random()
        })
        let allLabel = deepClone(this.$getCache('callLabel'))
        if (allLabel === -1) {
          this.isCallLabel = false
          allLabel = []
        }
        let labelType = this.$store.state.call.transCache.callLabelType
        let multiObj = this.$store.state.call.transCache.multiLabel
        let singleObj = this.$store.state.call.transCache.singleLabel
        if (multiObj && labelType === 'multi') { // 能取多标签并且状态是多级
          return multiObj
        } else if (singleObj.singleLabel && labelType === 'single') { // 能取单标签并且状态是单级
          return singleObj.singleLabel
        } else { // 取不到标签，重新往call里面存单标签和多标签
          let singleObj = getAllUseSingleCallLabel(allLabel)
          this.$store.commit('call/SET_CALL_SINGLE_LABEL', singleObj)
          let multiObj = getAllUseMultiCallLabel(allLabel)
          this.$store.commit('call/SET_CALL_MULTI_LABEL', multiObj)
          if (labelType === 'single') {
            return singleObj.singleLabel
          } else if (labelType === 'multi') {
            return multiObj
          }
        }
      },
      redRuleResults () {
        return this.currentItemCall.ruleResults.filter(function (item) {
          return item.redFlag
        })
      }
    },
    props: {
      currentItemCall: Object,
      template: Object,
      currentGrade: Object,
      refreshCallGrade: {type: Number, default: 0},
      reGrade: {type: Boolean, default: false},
      disabled: {type: Boolean, default: false},
      callDialogShow: {type: Boolean, default: false},
      flagId: {type: String, default: ''},
      appealFlag: {type: Boolean, default: false},
      ruleRender: {type: Array, default: []}
    },
    methods: {
      getRowClass (row, rowIndex) {
        // children 是你子项的数组 key
        if (!row.row.webChatRuleDetail||row.row.webChatRuleDetail.length==0) {
          return 'row-expand-cover'
        }
      },
      expandChange(row){
        // console.log(row,'expandedRows')
        this.$nextTick(()=>{
          let redFont = document.getElementById('redFont')
          if(redFont){
            let span = redFont.getElementsByTagName('span')
            if(this.redRuleResults.length>0){
              for (let n=0;n < span.length;n++) {
                redFont.getElementsByTagName('span')[n].style.color = '#000'
              }
              let redFontItem = redFont.getElementsByClassName(row.ruleId)
              console.log(redFontItem,'redFontItem')
              for (let i=0;i < redFontItem.length;i++) {
                redFont.getElementsByClassName(row.ruleId)[i].style.color = 'red'
                }
            }
          }
        })
      },
      // 查看大图
      showBigImage (item, obj) {
        commitImg(item, obj)
      },
      rejectFun () {
        this.$emit('rejectFun', this.currentItemCall.rejectId)
      },
      checkImg (value) {
        if (checkform(value, 'Img')) {
          return false
        } else {
          return true
        }
      },
      inputChangeFun (str) {
        if (this.resultGrade + Number(str) > 100) {
          this.resultGrade = 100
        } else if (this.resultGrade + Number(str) < 0) {
          this.resultGrade = 0
        } else {
          this.resultGrade = this.resultGrade + Number(str)
        }
      },
      handiInputChangeFun (str) {
        this.inputFlag = true
        this.isHandStatus = false
        if (str > 100) {
          this.resultGrade = 100
        } else if (str < 0) {
          this.resultGrade = 0
        } else {
          this.resultGrade = Number(str)
        }
      },
      ruleChecked () {
        console.log(this.currentItemCall,'this.currentItemCall')
        this.supplementalInputValue = ''
        let arr = []
        console.log(this.currentItemCall,'this.currentItemCall')
        if(this.currentItemCall.dialogues){
          this.currentItemCall.dialogues.forEach(item=>{
            if(item.hitRecord.length>0){
              item.hitRecord.forEach(i=>{
                let obj = JSON.parse(JSON.stringify(i))
                obj.text = item.text
                arr.push(obj)
              })
            }
          })
        }
        this.currentItemCall.ruleResults.forEach(item=>{
          item.webChatRuleDetail = []
          arr.forEach(i=>{
          if(item.ruleId==i.ruleId){
            if(i.type=='keywordCheck'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.keyWordsMatch')
            }else if(i.type=='interrupt'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.serviceHijacking')
            }else if(i.type=='firstResponse'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.firstResponse')
            }else if(i.type=='talkSpeed'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.speedDetection')
            }else if(i.type=='regCheck'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.regularMatch')
            }else if(i.type=='talkInterval'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.conversationInterval')
            }else if(i.type=='regRepeat'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.contextRepetition')
            }else if(i.type=='moodTest'){
              i.type=this.$t('configLazyLoad.intelligentQualityCheck.emotionDetection')
            }
            item.webChatRuleDetail.push({
              text:i.text,
              type:i.type
            })
          }
          })
        })
        this.$set(this.currentItemCall.ruleResults,'self_update',''); // 先使用强制更新一下
        delete this.currentItemCall.ruleResults['self_update'];  // 然后把这个属性再删了
        this.currentItemCall.ruleResults.forEach((item, index) => {
          if (!item.isCanceled || item.isCanceled === false) {
            this.resultGrade = this.currentItemCall.gradeAmount
//            setTimeout(() => {
//              this.$refs.callRuleTable.toggleRowSelection(this.currentItemCall.ruleResults[index], true)
//            }, 800)
          } else {
            this.resultGrade = this.currentItemCall.gradeAmount
          }
        })
      },
      cutout(cellValue) {
        return cellValue.replace(/\,/g, '</br>')
      },
      handleSelectionChange (val) { // 多选点击事件
        this.supplementalInputValue = ''
        let nomalGrade = 0
        val.map(item => {
          nomalGrade += Number(item.scoreItem.split(',')[1])
        })
        if (Number(this.currentItemCall.nomalScore) + nomalGrade > 100) {
          this.resultGrade = 100
        } else if (Number(this.currentItemCall.nomalScore) + nomalGrade < 0) {
          this.resultGrade = 0
        } else {
          this.resultGrade = Number(this.currentItemCall.nomalScore) + nomalGrade
        }
        this.multipleSelection = val
      },
      businessEvent (eventData) {
        let data = eventData.data
        this.busId = data._id
        if (eventData.event !== 'changeBusinessMaster') {
          this.$store.dispatch('getBusinessDetailById', {_id: this.busId})
        }
      },
      busShowDetail (id) {
        this.busDetailShow = !this.busDetailShow
        if (this.busDetailShow) {
          this.$store.dispatch('getBusinessDetailById', {_id: id}).then(() => {
            this.busId = id
          })
        }
      },
      fetchData () {
        this.currentItemCall.CALL_TIME_LENGTH_show = showCountDown(this.currentItemCall.CALL_TIME_LENGTH * 1000)
        if (this.currentItemCall.RING_TIME_LENGTH && this.currentItemCall.RING_TIME_LENGTH !== '00:00:00') {
          this.currentItemCall.RING_TIME_LENGTH_show = showCountDown(this.currentItemCall.RING_TIME_LENGTH * 1000)
        } else {
          this.currentItemCall.RING_TIME_LENGTH_show = '00:00:00'
        }
      },
      off () {
        this.comment = ''
        this.handInputValue = ''
        this.supplementalInputValue = ''
        this.checkBoxIsTrue = false
        this.isHandStatus = false
        this.$emit('off')
      },
      changeAudioSpeed (item) {
        let local = window.localStorage
        local.setItem('audioSpeed', item)
        let myAudio = document.getElementById('quality-autoplay_' + this.flagId + '_old')
        if (myAudio && myAudio.playbackRate) {
          myAudio.playbackRate = item
        }
      },
      closeWindow () {
        this.comment = ''
        this.handInputValue = ''
        this.busDetailShow = false
        this.supplementalInputValue = ''
        this.checkBoxIsTrue = false
        this.isHandStatus = false
        this.$emit('close')
        this.pauseAudio = 'close'
      },
      checkBoxFun () {
        if (this.checkBoxIsTrue) {
          this.supplementalInputValue = ''
          this.isHandStatus = true
        } else {
          this.handInputValue = ''
          this.resultGrade = this.currentItemCall.basicScore
          this.isHandStatus = false
        }
      },
      checkResultFun () { // 复核
        let data = {
          result: this.currentItemCall._id,
          comment: this.comment
        }
        if (this.appealFlag) {
          data.appeal = this.currentItemCall.rejectId
        }
        data.gradeAmount = this.resultGrade
        data.currentRules = this.multipleSelection
        if (this.currentItemCall.type === 'manual') { // 手动评分
          data.manualScore = this.handInputValue
        } else if (this.currentItemCall.type === 'auto') { // 补充得分
          data.supplementScore = this.supplementalInputValue
        }
        if (this.handInputValue > 100 || this.handInputValue < 0 || this.supplementalInputValue > 100) {
          this.$message({
            type: 'error',
            message: this.$t('intelligentQualityCheck.intelTestNumOne')
          })
          return
        }
        this.$store.dispatch('queryIntelligentQualityCheckResultAllCheckResultCall', data).then((res) => {
          if (res && res.success) {
            this.comment = ''
            this.checkBoxIsTrue = false
            this.isHandStatus = false
            this.resultGrade = 0
            this.handInputValue = ''
            this.supplementalInputValue = ''
            this.$emit('checkResultFun', res)
          }
        })
      },
      channelFun () { // 取消
        this.comment = ''
        this.handInputValue = ''
        this.supplementalInputValue = ''
        this.checkBoxIsTrue = false
        this.isHandStatus = false
        this.$emit('channelFun')
      },
      giveUpResult () { // 放弃质检
        let data = {
          ids: [this.currentItemCall._id]
        }
        this.$store.dispatch('giveUpQualityCheckesRultAllCall', data).then(res => {
          this.comment = ''
          this.supplementalInputValue = ''
          this.handInputValue = ''
          this.checkBoxIsTrue = false
          this.$emit('giveUpResult', res)
        })
      },
      //      按规则标红关键字
      markRed (val, index) {
        this.rulesIndex = index
        this.$refs.callChatView.markRed(val)
      }
    },
    mounted () {
      bus.$on('intelQualityEnterCallDeltails', () => {
        this.rulesIndex = 0    //  按规则标红关键字
        this.$nextTick(function () {
          if (this.currentItemCall.type === 'auto') {
            this.ruleChecked()
          } else {
            this.resultGrade = this.currentItemCall.gradeAmount
          }
        })
      })
      if (this.currentItemCall.type === 'auto') {
        this.ruleChecked()
      }
    },
    beforeMount () {
      let p1 = this.$store.dispatch('getCache', {type: 'businessFlowStep'})
      let p2 = this.$store.dispatch('getCache', {type: 'businessFlowField'})
      let p3 = this.$store.dispatch('getCache', {type: 'businessFlow'})
      let p4 = this.$store.dispatch('getCache', {type: 'sqLabels'})
      let p5 = this.$store.dispatch('getCache', {type: 'qualityMonitorCheck'})
      let self = this
      Promise.all([p1, p2, p3, p4, p5]).then(() => {
        self.loading = false
      })
      let labelType = this.$store.state.call.transCache.callLabelType
      this.labelType = labelType
      this.$store.dispatch('getDicCache', {'type': 'qualityCheckMonitorTypeStatus'}).then((res) => {
        if (res && res.success) {
          this.changeMonitorType = res.data
        }
      })
      this.fetchData()
    },
    beforeDestroy () {
      bus.$off('intelQualityEnterCallDeltails')
    },
    watch: {
      refreshCallGrade () {
        this.refreshAudio = Math.random() // change audio组件的标志
        this.pauseAudio = 'open'
        this.SQ_LABEL = ''
        this.monitorType = ''
        this.isAddPerformanceChecked = true    //   绩效录音 复选框 默认为  TRUE
        this.fetchData()
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .layout-qua
    transition transform 0.35s
    box-shadow 0 3px 6px rgba(0, 0, 0, .3)
    animation movelayout-qua .4s
    @keyframes movelayout-qua
      0%
        width 0px
      100%
        width calc(84vw)
  .layin-qua
    width:0px
    transition transform 0.35s
  .channelHit
    margin 20px 0px
  .call-grade.layin-qua .call-grade-right
    width 0px
  .call-grade.layout-qua .call-grade-right
    width 396px
  .call-grade.layin-qua .call-grade-left
    width 0px
  .call-grade.layout-qua .call-grade-left
    width calc(84vw - 396px)
  .call-grade
    position fixed
    right 0
    top 95px
    height calc(100% - 95px)
    z-index 6
    background-color #fff
    .bus-info
      .listen
        display: none
    .call-grade-left
      float left
      position relative
      z-index 5
    /*width calc(100% - 396px)*/
    .call-grade-right
      float right
      position relative
      z-index 5
      /*width 396px*/
      background-color #f2f2f2
    .call-grade-left h2,.call-grade-right h2
      padding 14px 20px
      font-size 16px
      font-weight bold
      border-bottom 1px solid #ccc
    .call-grade-right h2
      border-left 1px solid #ccc
    .call-grade-left .call-grade-left-con,.call-grade-right .call-grade-right-con
      height calc(100vh - 185px)
      overflow-y auto
      overflow-x hidden
      padding 20px
    .call-grade-right .call-grade-right-con
      border-left 1px solid #ccc
  .mask-qua
    position fixed
    right 0
    left 0
    top 0
    bottom 0
    z-index 2
    background-color #fff
    /*filter Alpha(Opacity=60)*/
    opacity 0
  .close
    position absolute
    right 28px
    top 14px
    z-index 5
    font-size 16px
    /*background-color #f2f2f2*/
    cursor pointer
</style>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl'
  .business
    border 1px solid #ddd
    background-color #f9f9f9
    padding 5px
    .data
      line-height 34px
      font-size 14px
      border-bottom 1px dotted #ddd
      height 34px
    .bus-info
      padding-top 4px
    .pad-right
      padding-right 6px
    .pad-left
      padding-left 6px
  .clearfix:after
    display block
  .sq-wrap
    margin-bottom 16px
  .pad
    padding 8px 15px 0 0
  .call-detail table
    bors(1px,#ddd)
    width 100%
    border-collapse collapse
    tr
      height 40px
      border-bottom 1px solid #e7e7eb
      td:nth-of-type(even)
        padding 10px
        color $cf-gray3
      td:nth-of-type(odd)
        padding 10px
        color $cf-gray0
    &:nth-of-type(even)
      color $cf-gray0
    tr:nth-of-type(even) td
      background #f4f5f9
    tr:hover td
      background $c-back
  .call-detail table tr:nth-last-child(1)
    border-bottom none
  .div-color
    color $cf-level1
  .span-color
    color: $c-main;
    cursor: pointer
  .right-input
    width:140px
  .right-text
    margin 10px 0px
    width: 340px
    height: 50px
  .supplemental
    /*border-bottom 1px solid #ccc*/
  .right-content
    color: $cf-gray6
  .checkBox
    margin 10px 5px 5px 0px
  .hand
    margin-top 20px
  .wrap_grade
    height 14px
    line-height 14px
    margin-bottom 10px
  .grade_ipt
    line-height 30px
  .assist
    float right
    color: $c-main
    cursor pointer
  .el-row
    margin-bottom 10px
    .grade_are
      line-height 50px
    .grade_ipt
      line-height 30px
  .wrap_grade
    height 14px
    line-height 14px
    margin-bottom 10px
    .qc_score
      margin-right 10px
    .assist
      float right
      color: $c-main
      cursor pointer
  .quickReply
    width 50px
    float left
  .rules-wrap
    padding 10px
    span
      display inline-block
      margin 0 14px 10px 0
      padding 4px 8px
      border 1px solid #ccc
      border-radius 8px
      color $c-main
      cursor pointer
    .active
      background-color $c-main
      color #fff

 /deep/ .el-table 
    .row-expand-cover 
      .cell 
        .el-table__expand-icon 
	        display: none;
</style>














